<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="../js/vue-3.2.26.js"></script>
</head>
<body>
<div id="app">
  <h3>父组件num11：{{num1}}</h3>
  <h3>父组件num12：{{num2}}</h3>
  <hr>
  <!-- 传递num1和num2，接收n1和n2的改变，去修改num1和num2 -->
  <hello :n1="num1" :n2="num2" @num1-change="num1Change" @num2-change="num2Change"></hello>
</div>
</body>
<template id="hello">
  <h4>子组件n1：{{n1}}</h4>
  <h4>子组件number1：{{number1}}</h4>
  <!-- 可以使用v-model进行双向绑定 -->
  <h4>子组件输入框1：<input type="text" v-model="number1"></h4>
  <hr>
  <h4>x100</h4>
  <h4>子组件n2：{{n2}}</h4>
  <h4>子组件number2：{{number2}}</h4>
  <h4>子组件输入框2：<input type="text" v-model="number2"></h4>
</template>
<script>
  const hello = {
    template: '#hello',
    props: {
      n1: Number,
      n2: Number,
    },
    data() {
      return {
        // 定义方法去接收props的值
        number1: this.n1,
        number2: this.n2,
      }
    },
    // 使用watch，监听data中值的变化
    watch: {
      // 方法名必须和值的名称一样才能监听，参数(新值,旧值)
      number1() {
        // 修改本组件的值
        this.number2 = this.number1 * 100;
        // 发射事件叫父组件修改值
        this.$emit('num1-change', this.number1);
      },
      number2() {
        this.number1 = this.number2 / 100;
        this.$emit('num2-change', this.number2);
      },
    },
    emits: ['num1-change', 'num2-change']
  }
  const App = {
    data() {
      return {
        num1: 123,
        num2: 12300
      }
    },
    methods: {
      num1Change(value) {
        this.num1 = parseFloat(value);
      },
      num2Change(value) {
        this.num2 = parseFloat(value);
      },
    },
    components: {
      hello
    }
  }
  const app = Vue.createApp(App).mount("#app");
</script>
</html>
